<template>
    <div class="assy">
        <div class="assy-inner">
            <div class="assy-item">
                <span class="assy-item-title">今日访问次数</span>
                <span class="assy-item-num">{{ nationwideTodayNum }}</span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">累计访问次数</span>
                <span class="assy-item-num">{{ nationwideAccumulateNum }}</span>
            </div>            
        </div>
        <div class="assy-panel">
        	<div class="assy-panel-title">系统使用排名（TOP3）</div>
        	<div class="assy-panel-tabs">
        		<ul>
        			<li :class="{ 'active': isActive1 }"  @click="changeTab('today')">今日</li>
		        	<li :class="{ 'active': isActive2 }"  @click="changeTab('thisMonth')">本月</li>	
						  <li :class="{ 'active': isActive3 }"  @click="changeTab('all')">全部</li>
        		</ul>						
        	</div>
        	<!--<div class="assy-panel-ranking">
        		<div class="ranking"><span>四川</span><span class="ranking-top1"></span></div>
        		<div class="ranking"><span>山东</span><span class="ranking-top2"></span></div>
        		<div class="ranking"><span>新疆</span><span class="ranking-top3"></span></div>
        	</div>-->
        	<div id="echartsRef" ref="echartsRef" class="echats-box"></div>
        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { getDisasterCount } from '@/api/geologicalDisaster.js';

const isActive1 = ref(false);
const isActive2 = ref(true);
const isActive3 = ref(false);
const nationwideTodayNum = ref('');
const nationwideAccumulateNum = ref('');
const todayData = ref([]);
const monthData = ref([]);
const allData = ref([]);


const changeTab = (val) => {
	if(val == "today"){
		isActive1.value = true;
		isActive2.value = false;
		isActive3.value = false;
		nextTick(() => {
			createEcharts(todayData.value);
		})
	}else if(val == "thisMonth"){
		isActive2.value = true;
		isActive1.value = false;
		isActive3.value = false;
		nextTick(() => {
			createEcharts(monthData.value);
		})
	}else if(val == "all"){
		isActive3.value = true;
		isActive1.value = false;
		isActive2.value = false;
		nextTick(() => {
			createEcharts(allData.value);
		})
	}
}
let myChart = null;
// 渲染图表
const createEcharts = (dataList) => {
	if (!myChart) {
		myChart = echarts.init(document.getElementById('echartsRef'));
	}
	let yAxisArr = dataList.map(item=>{return item.province})
	let dataArr = dataList.map(item=>{return item.num})
	// 数据
	let dataAxis = yAxisArr.reverse();
	let data = dataArr.reverse();
	// 配置项
	const option = {
		title: {
			show: false
		},
		xAxis: {
			type: 'value',
			position: 'top',
			// 不显示线条和刻度
			splitLine: {
				show: false,
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false,
			},
		},
		yAxis: {
			type: 'category',
			data: dataAxis,
			// 不显示线条和刻度
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				margin: 22,
				color: '#999999',
				// align: 'right',
			},
			splitLine: {
				show: false,
			}
		},
		grid: {
			show: false,
			left: '12%',
			right: '0',
			top: 10,
			bottom: 10,
		},
		tooltip: {
			show: true,
			formatter: '{b0}: {c0}'
		},
		series: [
			{
				type: 'bar',
				barWidth: '10',
				showBackground: false,
				backgroundStyle: {
					borderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
				},
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#0775FE' },
						{ offset: 1, color: '#46FFFF' }
					]),
					barBorderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
					// shadowColor: '#0775FE',
					// shadowBlur: 2,
				},
				data: data
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}
// 挂载完成
onMounted(() => {
	// 渲染图表
	getDisasterCount().then((res) => {
		nationwideTodayNum.value = res.data.nationwideTodayNum;
		nationwideAccumulateNum.value = res.data.nationwideAccumulateNum;
		todayData.value = res.data.today;
		monthData.value = res.data.month;
		allData.value = res.data.all;
		createEcharts(monthData.value);
	})
	
})
</script>
<style lang='scss' scoped>
.assy{
    color: #fff;
    .assy-inner{
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        justify-content: space-between;
    }
    &-item{
        width: 190px;
        height: 65px;
        background-size: 100% 100%;
        background-image: url(/src/assets/images/anbao/bg_num.png);
        margin-bottom: 10px;
        margin-left: 20px;
        &:nth-child(2){
            margin-right: 20px;
        }
        span{
            display: block;
            color: #46FFFF;
        }
        &-title{
            padding:6px 0 2px 8px;
            color: #46FFFF;
            font-size: 14px;
        }
        &-num{
            padding-left: 13px;
            font-size: 30px;
            letter-spacing: 13px;
            text-align: right;
        }
    }
    .assy-panel{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        &-title{
					font-size: 16px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					-webkit-background-clip: text;
					position: absolute;
					left: 20px;
        }
        &-tabs ul{
        	width: 110px;
					height: 20px;				
					position: absolute;
					right: 20px;
					list-style-type: none;
			    padding: 0;
			    margin: 0;
			    display: flex;
			    .active{
			    	background: #46FFFF;
						color: #03007B;
			    }
			   	li{
			   		font-size: 12px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #46FFFF;
						cursor: pointer;
			   	}
					li:nth-child(1){
						text-align: center;
						width: 38px;
						height: 20px;

            border-radius: 12px 0px 0px 12px;
						border: 1px solid rgba(70,255,255,0.7);
        	}
        	li:nth-child(2){
						text-align: center;
						width: 38px;
						height: 20px;
						border: 1px solid rgba(70,255,255,0.7);
						
        	}
        	li:nth-child(3){
						text-align: center;
						width: 38px;
						height: 20px;
            border-radius: 0px 12px 12px 0px;
						border: 1px solid rgba(70,255,255,0.7);
        	}
        }
        .echats-box {
					width: 100%;
					height: 130px;
					margin-left: 20px;
					margin-top: 20px;
				}
        &-ranking{
        	position: absolute;
        	left: 20px;
        	top: 40px;
					font-size: 14px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #707597;
        	.ranking{
        		margin-bottom: 10px;
        		&-top1{
        			display: inline-block;
        			margin-left: 20px;
        			width: 328px;
							height: 10px;
							background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
							border-radius: 0px 5px 5px 0px;
        		}
        		&-top2{
        			display: inline-block;
        			margin-left: 20px;
        			width: 284px;
							height: 10px;
							background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
							border-radius: 0px 5px 5px 0px;
        		}
        		&-top3{
        			display: inline-block;
        			margin-left: 20px;
        			width: 257px;
							height: 10px;
							background: linear-gradient(90deg, #0775FE 0%, #46FFFF 100%);
							border-radius: 0px 5px 5px 0px;
        		}
        	}
        	
        }
    }
}
</style>